
<template>
  <div class="container-directorys">
    <!-- 搜索部分 -->
    <el-card>
      <div class="filter_box"></div>
      <el-form
        inline
        label-width="80px;"
      >
        <el-form-item
          label="学科编号"
          label-width="80px;"
        >
          <el-input
            v-model="reqParams.subjectName"
            placeholder="请输入关键字"
          ></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-select
            v-model="reqParams.state"
            style="width:130px;"
            placeholder="请选择状态"
          >
            <el-option
              label="启用"
              :value="1"
            ></el-option>
            <el-option
              label="禁用"
              :value="0"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn">
          <el-button
            @click="clear"
            type="default"
          >清除</el-button>
          <el-button
            @click="search"
            type="primary"
          >搜索</el-button>
          <el-button
            class='addTage'
            @click="directorysAdd"
            type="success"
            icon="el-icon-edit"
            size="small"
          >新增目录</el-button>
        </el-form-item>
      </el-form>
      <el-alert
        class="alert"
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
        style="margin-bottom:15px"
      ></el-alert>
      <!-- 列表部分 -->
      <el-table
        :data="directorysList"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80px;"
        >
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
        > </el-table-column>
        <el-table-column
          prop="directoryName"
          label="目录名称"
          width="200px;"
        >
        </el-table-column>

        <el-table-column
          prop="username"
          label="创建者"
        > </el-table-column>
        <el-table-column
          label="创建日期"
          width="180px;"
        >
          <template slot-scope="scope">
            {{scope.row.addDate|parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          prop="totals"
          label="面试题数量"
          width="200px;"
        ></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{scope.row.state==0? '已禁用':'已启用'}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              @click="changeStatus(scope.row.id,scope.row.state)"
              :underline="false"
              type="primary"
            >{{scope.row.state===1?'禁用':'启用'}}</el-link>
            <el-link
              :underline="false"
              @click="editDirectory(scope.row)"
              :disabled="scope.row.state===1 ? false : true"
              type="primary"
            >修改</el-link>

            <!-- <el-button
              @click="deleteSubject(scope.row.id)"
              type="default"
            >删除</el-button> -->
            <el-link
              :disabled="scope.row.state===1 ? false : true"
              :underline="false"
              @click="delDirectorys(scope.row.id)"
              type="primary"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pager"
        style="margin-top:30px;text-align:center;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="reqParams.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="reqParams.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

    </el-card>
    <!-- 添加目录列表数据的对话框 -->
    <el-dialog
      title="新增目录"
      :visible.sync="addDialogVisible"
      width="25%"
    >
      <span>
        <directorysAdd @close="closeADD"></directorysAdd>
      </span>
    </el-dialog>
    <!-- 修改目录列表的对话框 -->
    <el-dialog
      title="修改目录"
      :visible.sync="editDialogVisible"
      width="25%"
      v-if="editDialogVisible"
    >
      <span>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="editFormRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="所属学科">
            <el-select v-model="ruleForm.subjectID">
              <el-option
                v-for="item in subjectLists"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="目录名称"
            prop="directoryName"
          >
            <el-input v-model="ruleForm.directoryName"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span
        slot="footer"
        class="dialog-footer"
        @Close="closeEdit"
      >
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editDirectorys"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 导入子组件
import { list as directorysList, remove as directorysDel, update as directorysUpdate, changeState as directorysState } from '@/api/hmmm/directorys.js'
import { simple as subjectList } from '@/api/hmmm/subjects.js'
import directorysAdd from '@/module-hmmm/components/directorys-add.vue'
export default {
  // mixins: [common],
  name: 'directoryName',
  components: {
    directorysAdd
  },
  data () {
    return {
      mlID: null,
      subjectLists: [],
      ruleForm: {
        subjectID: '',
        directoryName: ''
      },
      // 验证规则
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      editDialogVisible: false, // 控制修改对话框显示
      addDialogVisible: false, // 添加对话框显示
      reqParams: {
        directoryName: null, // 目录名称
        page: 1, // 当前页面
        pagesize: 10, // 尺寸
        subjectID: null, // 学科编号
        state: null // 状态
      },
      value: '123',
      // 目录列表
      directorysList: [],
      page: 1,
      limit: 2, // 每页多少条
      total: 0 // 总共多少条数据
    }
  },
  created () {
    this.getDirectorysList()
    this.subjectList()
  },
  methods: {

    // 获取学科列表
    async subjectList () {
      try {
        const { data } = await subjectList()
        this.subjectLists = data
        // console.log(this.subjectLists)
      } catch (error) {
        console.log(error)
      }
    },
    // 删除
    delDirectorys (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该目录, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(id)
        await directorysDel({ id: id })
        // console.log(id)
        this.$message.success('删除成功')
        // console.log(this)
        this.getDirectorysList()
      }).catch(e => { })
    },
    // 获取目录列表
    async getDirectorysList () {
      const { data } = await directorysList({
        page: this.reqParams.page,
        pagesize: this.reqParams.pagesize,
        directoryName: this.reqParams.subjectName,
        state: this.reqParams.state,
        subjectID: this.reqParams.subjectID
      })
      // console.log(data)
      this.directorysList = data.items
      // console.log(this.directorysList)
      // console.log(this.directorysList)
      this.total = data.counts
    },
    // 搜索
    async search () {
      this.reqParams.pagesize = 1
      try {
        const { data } = await directorysList({ directoryName: this.reqParams.subjectName })
        this.$message.success('获取数据成功!')
        console.log(data)
      } catch (error) {
        this.$message.error('搜索数据失败!')
      }
      this.getDirectorysList()
    },
    // 清除
    clear () {
      this.reqParams = {
        directoryName: null, // 目录名称
        page: 1, // 当前页面
        pagesize: 10, // 尺寸
        subjectID: null, // 学科编号
        state: null // 状态
      }
      this.getDirectorysList()
    },
    // 每页的页码发生了改变
    handleSizeChange (newSize) {
      console.log(newSize)
      this.reqParams.pagesize = newSize
      this.getDirectorysList()
    },
    // 每页页码发生了改变
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.reqParams.page = newPage
      this.getDirectorysList()
    },
    // 更改状态
    // async changeStatus (row) {
    //   const res = await this.$axios.post('/subject/status', {
    //     id: row.id
    //   })

    //   if (res.data.code === 200) {
    //     this.$message({
    //       type: 'success',
    //       message: '更改状态成功~'
    //     })

    //     row.status = row.status === 0 ? 1 : 0
    //   }
    // },
    // 控制添加目录对话框的显示
    directorysAdd () {
      this.addDialogVisible = true
    },
    closeADD () {
      this.addDialogVisible = false
      this.getDirectorysList()
    },
    closeEdit () {
      this.editDialogVisible = false
      this.getDirectorysList()
    },

    // 控制修改目录对话框的显示
    editDirectory (id) {
      console.log(id)
      this.ruleForm.subjectID = id.subjectID
      this.ruleForm.directoryName = id.directoryName
      this.mlID = id.id
      this.editDialogVisible = true
    },
    // 修改
    editDirectorys () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        try {
          const { data } = await directorysUpdate({ id: this.mlID, subjectID: this.ruleForm.subjectID, directoryName: this.ruleForm.directoryName })
          console.log(data)
          this.getDirectorysList()
          this.$message.success('修改数据成功')
          this.editDialogVisible = false
        } catch (error) {
          this.$message.error('修改数据失败!')
        }
      })
    },
    // 状态
    async changeStatus (id, state) {
      if (state === 1) {
        await directorysState({
          id: id,
          state: 0
        })
        state = 0
        this.getDirectorysList()
        this.$message.success('操作成功!')
      } else {
        await directorysState({
          id: id,
          state: 1
        })
        state = 1
        this.$message.success('操作成功!')
        this.getDirectorysList()
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.container-directorys {
  padding: 10px 15px;
  .pager {
    margin-top: 15px;
    margin-bottom: 15px;
    float: right;
  }
  .addTage {
    margin-left: 700px;
  }

  ::v-deep .el-link--inner {
    margin-left: 15px;
  }
  ::v-deep .btn {
    width: 1000px;
  }
}
</style>
